<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/jquery-3.2.1.min.js"></script>
    <style>
        .banner{
            position:relative;
            overflow:hidden;
            margin:100px auto;
            width:520px;
            height:280px;
        }
        .banner ul{
            margin:0;
            padding:0;
            list-style:none;
        }
        .imgs{
            position:absolute;
            top:0;
            left:0;
        }
        .imgs li{
            float:left;
        }

        .dot{
            position:absolute;
            bottom:10px;
            width:100%;
            text-align:center;
            background: rgba(249, 250, 248, 0.808);
            font-size:0;
            width: 130px;
            left: 180px;
            height: 16px;
            border-radius: 15px;
        }
        .dot li{
            display:block;
            display:inline-block;
            margin:0 5px;
            width:15px;
            height:15px;
            border-radius:100%;
            background:rgba(145,144,144,.5);
            cursor:pointer;
        }
        .dot .on{
            background-color:red;
        }

        .arrow{
            display:none;
        }
        .arrow span{
            display:block;
            width:20px;
            height:30px;
            background:rgba(0,0,0,.6);
            color:#fff;
            cursor:pointer;
            }
            @font-face {
            font-family: 'icomoon';
            src: url('fonts/icomoon.eot?gccjfb');
            src: url('fonts/icomoon.eot?gccjfb#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?gccjfb') format('truetype'), url('fonts/icomoon.woff?gccjfb') format('woff'), url('fonts/icomoon.svg?gccjfb#icomoon') format('svg');
            font-weight: normal;
            font-style: normal;
            font-display: block;
        }
        .arrow .prev{
            font-family: 'icomoon';
            position:absolute;
            line-height: 30px;
            top:50%;left:0;
            margin-top:-30px;
            font-size: 25px;
            border-radius:0 15px 15px 0;
            }
        .arrow .next{
            font-family: 'icomoon';
            position:absolute;
            line-height: 30px;
            top:50%;
            font-size: 25px;
            right:0;
            margin-top:-30px;
            border-radius: 15px 0 0 15px;
            }
    </style>
</head>
<body>
    <div class="banner">
        <ul class="imgs">
          <li><a href="#"><img src="images/TB01.jpg" ></a></li>
          <li><a href="#"><img src="images/TB02.jpg" ></a></li>
          <li><a href="#"><img src="images/TB03.jpg" ></a></li>
          <li><a href="#"><img src="images/TB04.jpg" ></a></li>
          <li><a href="#"><img src="images/TB05.jpg" ></a></li>
        </ul>
        <!--小圆点-->
        <ul class="dot"><li class="on"></li>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
        <div class="arrow">
            <span class="prev"></span>
            <span class="next"></span></div>
        </div>
        <script>
            $(function() {
            var i = 0;           
            var timer = null;    
            var delay = 1800;    
            var width = 520;     
            var speed = 1000;    
            
            var firstimg = $('.imgs li').first().clone();
            $('.imgs').append(firstimg).width($('.imgs li').length * width);
                timer = setInterval(imgChange, delay);
            $('.banner').hover(function() {
               clearInterval(timer);
            }, function() {
                timer = setInterval(imgChange, delay);
            });
            $('.dot li').mouseover(function() {
                i = $(this).index();
                $('.imgs').stop().animate({left: -i * width}, 200);
                dotChange();
            });
            // 左右切换的箭头显示和隐藏
            $('.banner').hover(function() {
                $('.arrow').show();
            }, function () { 
                $('.arrow').hide();
            });
            // 向右箭头
            $('.next').click(function() {
                imgChange()
            });
            // 向左箭头
            $('.prev').click(function() {
                --i;
                if (i == -1) {
                i = $('.imgs li').length - 2;
                $('.imgs').css({left: -($('.imgs li').length - 1) * width});
                }
                $('.imgs').stop().animate({left: -i * width}, speed);
                dotChange();
            });
            // 自动切换图片
            function imgChange() {
                ++i;
                isCrack();
                dotChange();
            }
            // 轮播
            function isCrack() {
                if (i == $('.imgs li').length) {
                i = 1;
                $('.imgs').css({left: 0});
                }
                $('.imgs').stop().animate({left: -i * width}, speed);
            }
            // 圆点
            function dotChange() {
                if (i == $('.imgs li').length - 1) {
                $('.dot li').eq(0).addClass('on').siblings().removeClass('on');
                } else {
                $('.dot li').eq(i).addClass('on').siblings().removeClass('on');
                }
            }
            });
        </script>
</body>
</html>